<template>
	<div>
		<el-drawer
			ref="drawerRef"
			v-model="drawerDialog"
			:title="title"
			direction="rtl"
			class="demo-drawer"
		>
			<rdbms-input
				ref="settingRef"
				v-if="nodeData.type === 'rdbms-input-node'"
			/>
			<rdbms-output
				ref="settingRef"
				v-if="nodeData.type === 'rdbms-output-node'"
			/>
			<template #footer>
				<el-button @click="cancelForm">取消</el-button>
				<el-button type="primary" @click="saveProperties">保存</el-button>
			</template>

		</el-drawer>
	</div>
</template>

<script setup>
import RdbmsInput from "./components/rdbms-input.vue";
import RdbmsOutput from "./components/rdbms-output.vue";
import {ref, reactive} from "vue";

const settingRef = ref(null)

const drawerDialog = ref(null)
const title = ref('')
const nodeData = ref()
let logicFlow = null

const state = reactive({})
const setProps = (data, lf) => {
	logicFlow = lf
	const nodeDataTypeUnion = data.type
	nodeData.value = data
	if (nodeDataTypeUnion === 'rdbms-input-node') {
		title.value = 'RDBMS'
	}
	if (nodeDataTypeUnion === 'rdbms-output-node') {
		title.value = 'RDBMS'
	}
	drawerDialog.value = true
}
const cancelForm = () => {
	drawerDialog.value = false
}
const saveProperties = () => {
	let properties = settingRef.value.getProperties();
	logicFlow.setProperties(nodeData.value.id, properties)
	console.log(logicFlow.getProperties(nodeData.value.id));
	cancelForm();
}

defineExpose({
	setProps
})

</script>

<style scoped>

</style>
